<template>
  <div class="payment-form">
    <h2>课程支付</h2>
    <form @submit.prevent="processPayment">
      <div class="form-group">
        <label>支付方式</label>
        <select v-model="paymentMethod" required>
          <option value="ALIPAY">支付宝</option>
          <option value="WECHAT">微信支付</option>
          <option value="CREDIT_CARD">信用卡</option>
        </select>
      </div>
      <div class="form-group">
        <label>课程名称</label>
        <input type="text" :value="course.title" disabled>
      </div>
      <div class="form-group">
        <label>支付金额</label>
        <input type="text" :value="`¥ ${course.price}`" disabled>
      </div>
      <button type="submit" :disabled="loading">
        {{ loading ? '处理中...' : '确认支付' }}
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { paymentService } from '@/services/payment.service'
import { useRouter } from 'vue-router'

const props = defineProps({
  course: {
    type: Object,
    required: true
  }
})

const router = useRouter()
const paymentMethod = ref('ALIPAY')
const loading = ref(false)

const processPayment = async () => {
  try {
    loading.value = true
    const order = await paymentService.createOrder(props.course.id, 'current_user_id')
    await paymentService.processPayment(order.id, paymentMethod.value)
    router.push('/courses')
  } catch (error) {
    console.error('支付失败', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.payment-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, select {
  width: 100%;
  padding: 8px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
}
</style>